<!-- 编辑弹窗 -->
<template>
  <div class="ele-body">
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :lock-scroll="false"
      width="860px"
      title="落地页模板应用"
      :visible="visible"
      custom-class="ele-dialog-form"
      @closed="closed"
      @update:visible="updateVisible"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="落地页:" prop="id">
          <el-select
            v-model="form.id"
            class="ele-block"
            clearable
            placeholder="请选择落地页"
          >
            <el-option
              v-for="item in siteList"
              :key="item.id"
              :label="`【` + item.SiteName + `】` + item.DomainUrl"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="操作日志:">
          <el-input
            v-model="templateLog"
            :readonly="true"
            :rows="17"
            clearable
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="updateVisible(false)">取消 </el-button>
        <el-button :loading="loading" type="primary" @click="save"
          >确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "TemplateEdit",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    source: String,
    // 修改回显的数据
    site: Array,
  },
  data() {
    return {
      // 表单数据
      form: Object.assign(
        {},
        {
          id: "",
        }
      ),
      // 表单验证规则
      rules: {
        id: [
          { required: true, message: "请选择要应用的落地页", trigger: "blur" },
        ],
      },
      // 提交状态
      loading: false,
      // 请求日志定时器
      timer: "",
      // 请求日志次数
      siteCount: 0,
      // 站点列表
      siteList: [],
      // 站点源码
      siteSource: "",
      // 远程操作日志
      templateLog: "暂无消息，待操作",
    };
  },
  watch: {
    source() {
      this.siteSource = this.source;
    },
    site() {
      if (this.site) {
        this.siteList = this.site;
      }
    },
  },

  methods: {
    closed() {
      this.siteCount = 0;
      this.form.id = "";
      this.templateLog = "暂无消息，待操作. \n";
      if (this.timer) {
        clearInterval(this.timer);
      }
    },

    getLog() {
      this.siteCount++;
      this.templateLog = this.templateLog + "正在加载远程日志, 请耐心等待. \n";
      this.$http
        .post("/template/getLog", {
          id: this.form.id,
        })
        .then((res) => {
          if (res.data.code === 0) {
            if (res.data.msg) {
              if (res.data.msg.indexOf("检测系统环境") > -1) {
                this.templateLog = res.data.msg;
                if (this.timer) {
                  clearInterval(this.timer);
                }
              }
            }
          }
        });
      if (this.siteCount === 30) {
        this.templateLog =
          this.templateLog + "站点URL识别失败, 远程日志加载失败. \n";
        if (this.timer) {
          clearInterval(this.timer);
        }
      }
    },

    save() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.$confirm("此操作将改变落地页模板, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.templateLog = "正在加载远程日志, 请耐心等待. \n";
              this.loading = true;
              this.$http
                .post("/template/apply", {
                  id: this.form.id,
                  source: this.siteSource,
                })
                .then((res) => {
                  this.loading = false;
                  if (res.data.code === 0) {
                    this.timer = setInterval(this.getLog, 5000);
                    this.$message({
                      type: "success",
                      message: res.data.msg,
                      dangerouslyUseHTMLString: true,
                    });
                    // this.updateVisible(false);
                  } else {
                    this.templateLog = "操作失败, 网络异常.\n";
                    this.$message.error({
                      type: "error",
                      message: res.data.msg,
                      dangerouslyUseHTMLString: true,
                    });
                  }
                })
                .catch((e) => {
                  this.loading = false;
                  this.$message.error(e.message);
                  this.templateLog = "操作失败, 网络异常.\n";
                });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消应用",
              });
            });
        } else {
          return false;
        }
      });
    },
    updateVisible(value) {
      this.$emit("update:visible", value);
    },
  },
};
</script>
<style scoped>
</style>
 